<template>
    <li :class="{ completed: todo.done, editing: editing }" class="todo">
        <div class="view">
            <input :checked="todo.done" class="toggle" type="checkbox" @change="toggleTodo( todo)">
            <label @dblclick="editing = true" v-text="todo.title" />
            <button class="destroy" @click="deleteTodo( todo )" />
        </div>
        <input v-focus="editing" v-show="editing" :value="todo.title" class="edit" @keyup.enter="doneEdit" @keyup.esc="cancelEdit" @blur="doneEdit">
    </li>
</template>

<script>
    export default {
        name: 'Todo',
        directives: {
            focus(el, { value }, { context }) {
                if (value) {
                    context.$nextTick(() => {
                        el.focus();
                    });
                }
            }
        },
        props: {
            todo: {
                type: Object,
                default: function() {
                    return {};
                }
            }
        },
        data() {
            return {
                editing: false
            };
        },
        methods: {
            deleteTodo(todo) {
                this.$emit('deleteTodo', todo);
            },
            editTodo({ todo, value }) {
                this.$emit('editTodo', { todo, value });
            },
            toggleTodo(todo) {
                this.$emit('toggleTodo', todo);
            },
            doneEdit(e) {
                const value = e.target.value.trim();
                const { todo } = this;
                if (!value) {
                    this.deleteTodo({
                        todo
                    });
                } else if (this.editing) {
                    this.editTodo({
                        todo,
                        value
                    });
                    this.editing = false;
                }
            },
            cancelEdit(e) {
                e.target.value = this.todo.title;
                this.editing = false;
            }
        }
    };
</script>
